<template>
    <div class="special">
        <div class="special_nav">
            <div class="special_top">
                <p @click="special">精选专题></p>
            </div>
            <div class="special_tu">
                <ul class="special_ul">
                    <li v-for="item in list" :key="item.id">
                        <img :src="item.pic" alt="" />
                        <p class="special_p1">{{ item.title }}</p>
                        <p
                            class="special_p2"
                            style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:400px;"
                        >
                            {{ item.descript }}
                        </p>
                        
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { special } from "../../../utils/api";
export default {
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        special().then((res) => {
            // console.log(res);
            this.list = res;
        });
    },
    methods: {
        special() {
            this.$router.push({ path: "/specialcolumn" });
        },
    },
};
</script>

<style lang="scss" scoped>
.special_tu {
    width: 100%;
    overflow: scroll;
}
.special_top {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid #e9e9e9;
}
.special_ul {
    width: 500%;
    height: 5.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background: palegreen;
    li {
        width: 100%;
        height: 5.5rem;
        font-size: 0.3rem;
        img {
            width: 100%;
            height: 4.5rem;
        }
        .special_p1 {
            margin-top: 0.2rem;
        }
        .special_p2 {
            color: gray;
            font-size: 0.25rem;
            margin-top: 0.2rem;
        }
    }
}
</style>













